<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/goods/youhui.css" />
		<script type="text/javascript">
			(function() {
				var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
				clientWidth = clientWidth || localStorage.getItem("clientWidth")
				if(clientWidth > 750)
					clientWidth = 750;
				document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
			})();
			
		</script>
		<style type="text/css">
			html,body{
				padding: 0;
				margin: 0;
			}
		</style>
	</head>

	<body>
		<!--<div class="ptsp_top_stats"></div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon  mui-pull-left">
				<img src="../images/ptsp/left_arr_03.png" alt="">
			</a>
			<h1 class="mui-title">优惠专区</h1>
		</header>-->

		<div id="pullrefresh" class=" mui-scroll-wrapper" style="padding-bottom: 60px;">
			<div class="mui-scroll">
				<!--数据列表-->
				<div class="mui-content" style="padding-top: 0;">
					<div class="youhui_search" onclick="mui.openWindow('search-ware.html','search-ware.html')">
						<input type="text" name="search" disabled="disabled" id="search" placeholder="请输入商品名称搜索...">
						<i class="mui-icon mui-icon-closeempty" @click="clear_input('search')"></i>
					</div>

					<div class="search-group-list">

						<div class="item" data-sid="i.sid"  v-for="i in shop_list"  @click="go_detail(i.sid)">
							<div class="img fl">
								<img :src="i.pic" alt="">
							</div>
							<div class="info fl">
								<span class="title" v-html="i.name"></span>

								<span class="des" v-html="i.desc"> </span>
								<div class="bottom">
									<span class="star">
							<i :class="i.pingfen>1?'light':''"></i>
							<i :class="i.pingfen>2?'light':''"></i>
							<i :class="i.pingfen>3?'light':''"></i>
							<i :class="i.pingfen>4?'light':''"></i>
							<i :class="i.pingfen==5?'light':''"></i>

						</span>
									<span v-html="i.star"></span>
									<span class="fr">月销量:{{i.xiaoliang}} </span>
								</div>
							</div>
						</div>

					</div>

				</div>
			</div>
		</div>

		<!--底部菜单-->
		<style type="text/css">
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #888888;
			}
			
			.bottom_nav_active span {
				color: #1c83fc;
			}
		</style>
		<nav class="mui-bar mui-bar-tab" style="border-top: 1px solid #d6d7dc;top: auto;">
			<a class="mui-tab-item " id='home_tab' href="shop_home.html">
				<span class="mui-icon ">
                <img src="../images/nav_12.png" width="19px;" alt="">
            	</span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item " id='class_tab' href="select_class.html">
				<span class="mui-icon">
                <img src="../images/nav_03.png" width="19px;" alt="">
            </span>
				<span class="mui-tab-label">分类</span>
			</a>
			<a class="mui-tab-item bottom_nav_active" id='shop_tab' href="mingpin.html">
				<span class="mui-icon">
                <img src="../images/mingpin_03.png" width="19px;" alt="">
            </span>
				<span class="mui-tab-label">名品商家</span>
			</a>
			<a class="mui-tab-item " id='car_tab' href="buyCar.html">
				<span class="mui-icon">
                <img src="../images/nav_07.png" width="19px;" alt="">
            </span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<!--<a class="mui-tab-item" id='my_tab' href="myshop.html">
				<span class="mui-icon">
                <img src="../images/nav_09.png" width="19px;" alt="">
            </span>
				<span class="mui-tab-label">我的</span>
			</a>-->
		</nav>

		<!--底部菜单 end-->
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/host.config.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '.mui-content',
				data: {
					shop_list : "",
					has_more_data: true
				},
				methods: {
					get_data: function(url, cb) {
 
						$.ajax({
							url:url,
							type:'get',
							data:{

							},
							success:function(res){
								
								if(typeof res == 'string'){
									res = JSON.parse(res)
								}
								console.log(res);
								if(res.code==1) {
									cb(res)
								}
							},
							error:function(err){
								console.log(err)
							}
						})



					},
					get_more_data: function() {
						var that = this;
						if(this.has_more_data) {
							this.get_data(" ", function(res) {

								 
							})
						}
					},
					clear_input: function(id) {
						document.querySelector("#" + id).value = "";
					},
					go_detail:function(){
				 
						mui.openWindow('mingpin_goods_list.html','mingpin_goods_list.html')
					}
				},
				created:function(){
					var that = this
					this.get_data("https://zhapp.4hl.cn/api/seller/get_shop", function(res) {
						that.shop_list = res.data;
					})
				},
				mounted: function() {
					var that = this;
					
					// 初始化页面
					mui.init({
						pullRefresh: {
							container: '#pullrefresh',
							down: {
								callback: pulldownRefresh
							},
							up: {
								contentrefresh: '正在加载...',
								callback: pullupRefresh
							}
						}
					});
					tap_init()
				}
			})

			function tap_init() {
				function click() {
					this.click();
				}

				mui(".search-group-list").on('tap', '.item', click)

			}

			function pulldownRefresh() {
				setTimeout(function() {

					app.get_data("/sim_data.search-group-list.json", function(res) {

					 
					})
					app.has_more_data = true;
					//获取数据成功过后将 列表重新渲染，完成后执行
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //刷新完成
				}, 1000);
			}

			function pullupRefresh() {
				setTimeout(function() {
					// 调用vue实例中的获取更多数据
					app.get_more_data();
					//如果 has_more_data 为false 则表示没有数据了 则调用endPullupToRefresh
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(!app.has_more_data); //参数为true代表没有更多数据了。

				}, 1000);
			}
			mui('.mui-bar-tab').on('tap', '.mui-tab-item', function() {
				console.log(this.href)
				mui.openWindow(this.href, this.href)
			})
		</script>
	</body>

</html>